<template>
    <div class="container process-list">
        <div class="card">
            <el-breadcrumb separator="/" class="card-body">
                <el-breadcrumb-item :to="{ path: '/AssetsManagement/MyAssets' }">我的资产</el-breadcrumb-item>
                <el-breadcrumb-item>{{ this.$route.meta.title }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="card">
            <div class="card-header">我的资产信息</div>
            <div class="card-body">
                <div class="login-log">
                    <h4>资产状况卡</h4>
                    <hr>
                    <p>创建时间：2018-09-09 18:00</p>
                    <p>上次使用时间：2018-09-09 18:00</p>
                    <p>上次使用地点：某某子公司(人事部)</p>
                </div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
                    <div class="info-ruleForm">
                        <el-form-item label="资产名称" prop="name">
                            <el-input v-model="ruleForm.name" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="编号" prop="number">
                            <el-input v-model="ruleForm.number" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="责任人" prop="person">
                            <el-input v-model="ruleForm.person" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="密级" prop="secretLv">
                            <el-input v-model="ruleForm.secretLv" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="分类" prop="class">
                            <el-input v-model="ruleForm.class" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="所属部门" prop="group">
                            <el-input v-model="ruleForm.group" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="储存位置" prop="department">
                            <el-input v-model="ruleForm.department" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="MAC地址" prop="MacAdress">
                            <el-input v-model="ruleForm.MacAdress" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="IP地址" prop="IPadress">
                            <el-input v-model="ruleForm.IPadress" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="当前资产状态" prop="state">
                            <el-input v-model="ruleForm.state" disabled></el-input>
                        </el-form-item>
                    </div>
                    <hr>
                    <div class="item-in-asstes">
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column prop="date" label="设备名称">
                            </el-table-column>
                            <el-table-column prop="name" label="编号" width="180">
                            </el-table-column>
                            <el-table-column prop="address" label="设备规格">
                            </el-table-column>
                            <el-table-column prop="amount" label="数量" width="180">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: "MyAssetsDetail",
  data() {
    return {
      ruleForm: {
        name: "高级网络套装",
        number: "ZC-0023",
        person: "吴佳佳",
        secretLv: "绝密",
        class: "信息设备",
        group: "研发部",
        department: "南京分公司",
        MacAdress: "00:01:6C:06:A6:29",
        IPadress: "123.123.123.123",
        state: "在用",
        guige: [
          {
            daxiao: 11,
            type: "select"
          },
          {
            changdu: 1
          }
        ]
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur"
          },
          {
            min: 2,
            max: 12,
            message: "长度在 2 到 12 个字符",
            trigger: "blur"
          }
        ],
        sex: [
          {
            required: true,
            message: "请选择性别",
            trigger: "change"
          }
        ],
        chinaID: [
          {
            required: true,
            message: "请输入身份证号码",
            trigger: "blur"
          },
          {
            min: 10,
            max: 18,
            message: "请输入正确的身份证号码",
            trigger: "blur"
          }
        ],
        jobID: [
          {
            required: true,
            message: "请输入工号",
            trigger: "blur"
          },
          {
            min: 3,
            max: 15,
            message: "请输入正确的工号",
            trigger: "blur"
          }
        ],
        authorizationList: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个权限",
            trigger: "change"
          }
        ],
        resource: [
          {
            required: true,
            message: "请选择活动资源",
            trigger: "change"
          }
        ],
        desc: [
          {
            required: true,
            message: "请填写活动形式",
            trigger: "blur"
          }
        ]
      },
      imageUrl: "",
      dialogVisible: false,
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1"
                }
              ]
            }
          ]
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1"
                }
              ]
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1"
                }
              ]
            }
          ]
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1"
                }
              ]
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1"
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      tableData: [
        {
          date: "思科三层交换机 SC-2323",
          name: "SB-323342",
          address: "24口 万兆交换机",
          amount: 1
        },
        {
          date: "中兴ZXR10",
          name: "SB-3233242",
          address:
            "企业级路由器，多业务路由器 传输速率：10000/40000/100000Mbps",
          amount: 1
        },
        {
          date: "杰和GCR2524MP-RF",
          name: "SB-323342",
          address: "Intel 至强E5 v3/v4 /16G SATA/SAS/SSD/NVMe SSD",
          amount: 1
        },
        {
          date: "华为FusionServer RH2288 V3",
          name: "SB-323342",
          address: "E5 v3芯动力 V3服务器",
          amount: 1
        }
      ]
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
          console.log(this.ruleForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleNodeClick(data) {
      console.log(data);
    },
    back() {
      this.$router.go(-1); //返回上一层
    }
  },
  mounted() {
    console.error(this.$route.query);
  },
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    document.body.className = "con-bg";
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    document.body.className = "";
    next();
  }
};
</script>
<style scoped>
.info-ruleForm {
  width: 420px;
  position: relative;
}

.login-log {
  position: absolute;
  right: 0;
  top: 0;
  border-left: 1px solid #f6f6f6;
  border-bottom: 1px solid #f6f6f6;
  color: #999;
  border-radius: 0 0 0 3px;
}

.login-log p {
  padding: 5px 2rem;
  margin-bottom: 5px;
  margin-top: 0;
}

.login-log h4 {
  padding: 5px 2rem;
  margin-bottom: 5px;
  margin-top: 5px;
  font-size: 16px;
  color: #333;
}

.login-log hr {
  margin: 0;
}

.authList {
  border: 1px solid #f2f2f2;
  padding: 0.5rem 1rem;
}

.del-query-tree-btn {
  position: absolute;
  right: -40px;
  top: 0;
}

.item-in-asstes {
  padding-bottom: 2rem;
}

.process-list {
  padding-top: 120px;
  max-width: 1200px;
  margin: 0 auto;
}
</style>